<template>
  <div class="common-layout" @click="noUser(false)">
    <!-- <div class="login" v-if="isLogin">
      <div class="loginLogo">
        <div class="loginLogoOut" @click.stop="loginLogoOut"><el-icon>
            <CloseBold />
          </el-icon></div>
        <div class="inLoginLogo"></div>
      </div>
      <input class="Account" type="text" placeholder="账号/邮箱/手机">
      <input class="Password" type="password" placeholder="密码">
      <el-button class="inLogin" @click.stop="toggleLoginImage" round>登录</el-button>
    </div> -->
    <el-container class="Body">
      <el-header class="Header">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="isEllipsis"
          router="true" @select="handleSelect">
          <el-menu-item index="0">
<!--            <img style="width: 10vw" src="/Images/logo.png" alt="logo" />-->
          </el-menu-item>
          <div class="flex-grow" />
          <el-menu-item index="homePage">主页</el-menu-item>
          <el-menu-item index="historicalData">历史数据</el-menu-item>
          <el-menu-item index="warningInformation">预警信息</el-menu-item>
          <el-menu-item index="reportManagement">报告管理</el-menu-item>
          <el-menu-item index="IoTPlatform">物联网平台</el-menu-item>
          <el-menu-item index="projectManagement">项目管理</el-menu-item>
        </el-menu>
        <div class="user1" @click.stop="toggleUser()">
          <!-- <el-avatar style="width: 58%; height: 90%; " v-if="isLoginImage" :icon="UserFilled" />
          <el-avatar v-else :icon="UserFilled" :src="circleUrl" /> -->
          <el-avatar :icon="UserFilled" :src="circleUrl" />
        </div>
      </el-header>
      <el-container>
        <el-aside class="Aside">
          <el-menu default-active="2" class="el-menu-vertical-demo dark-mode" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <el-menu-item @click="toggle" class="menu1" index="1">
              <el-icon v-if="isCollapse">
                <Fold />
              </el-icon>
              <el-icon v-else>
                <Expand />
              </el-icon>
            </el-menu-item>
            <el-sub-menu index="2" popper-class="dark-mode">
              <template #title>
                <el-icon>
                  <HomeFilled />
                </el-icon>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template #title><span>第一组</span></template>
                <el-menu-item class="menu1" index="2-1" to="/home/2D">
                  <router-link class="menuD23" to="/home/2D"><el-icon>
                      <MapLocation />
                    </el-icon>二维</router-link>
                </el-menu-item>
                <el-menu-item class="menu1" index="2-2">
                  <router-link class="menuD23" to="/home/3D"><el-icon>
                      <Baseball />
                    </el-icon>三维</router-link>
                </el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="第二组">
                <el-menu-item index="2-3">项目三</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="2-4">
                <template #title><span>项目四</span></template>
                <el-menu-item index="2-4-1">项目五</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="3">
              <el-icon><icon-menu /></el-icon>
              <template #title>导航二</template>
            </el-menu-item>
            <el-menu-item index="4" disabled>
              <el-icon>
                <document />
              </el-icon>
              <template #title>导航三</template>
            </el-menu-item>
            <el-menu-item index="5">
              <el-icon>
                <setting />
              </el-icon>
              <template #title>导航四</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="Main" :style="{ flexDirection: flexDirection }">
          <div ref="draggableDiv" class="trueDrawer" :style="{
            position: currentPosition,
            left: canDrag && currentPosition === 'absolute' ? `${position.left}px` : leftDrawer,
            top: canDrag && currentPosition === 'absolute' ? `${position.top}px` : topDrawer,
            width: isW ? DrawerWidth : boxWidth + 'px',
            height: isH ? DrawerHeight : boxHeight + 'px',
            transition: drawerTransition,
            'min-height': minHeightDrawer,
            'min-width': minWidthDrawer,
            cursor: canDrag && isOverHeader ? 'move' : 'default'
          }" @mousedown.stop="handleMouseDown">
            <div v-if="isBottomOverlay || isOverlay" class="pullDrawerTop" @mousedown.stop="initResizeTop"></div>
            <div class="trueDrawer1">
              <div class="trueDrawer11" v-if="isPanel">多功能面板</div>
              <div title="多功能面板" class="trueDrawerImage11" v-else><img src="/Images/more.png" alt="多功能面板"
                  style="width: 80%; height: 70%;"></div>
              <div class="trueDrawerOverlay" @click.stop="toggleDraggingAndPosition" :class="{ 'Overlay': isOverlay }">
                <img src="/Images/overlay.png" alt="浮窗" style="width: 80%; height: 70%;">
              </div>
              <div class="trueDrawer12" @click.stop="toggleLeftOverlay" :class="{ 'Overlay': isLeftOverlay }"><img
                  src="/Images/leftOverlay.png" alt="左侧浮窗" style="width: 80%; height: 70%;"></div>
              <div class="trueDrawer13" @click.stop="toggleBottomOverlay" :class="{ 'Overlay': isBottomOverlay }"><img
                  src="/Images/bottomOverlay.png" alt="底部浮窗" style="width: 80%; height: 70%;"></div>
              <div class="trueDrawer14" @click.stop="toggleDrawer"><img src="/Images/min.png" alt="底部浮窗"
                  style="width: 80%; height: 70%;"></div>
            </div>
            <div class="TrueDrawer">
              <div v-if="isOverlay" class="pullDrawerLeft" @mousedown.stop="initResizeLeft"></div>
              <div class="trueDrawer2"></div>
              <div v-if="isLeftOverlay || isOverlay" class="pullDrawerRight" @mousedown.stop="initResizeRight"></div>
            </div>
            <div v-if="isOverlay" class="pullDrawerBottom" @mousedown.stop="initResizeBottom"></div>
          </div>
          <div class="view" :style="{ order: MainOrder }">
            <div v-if="isDrawer" class="Drawer" @click.stop="toggleDrawer">
              <el-icon>
                <Back />
              </el-icon>展开
            </div>
            <div v-else class="Drawer" @click.stop="toggleDrawer">
              <el-icon>
                <Right />
              </el-icon>面板
            </div>
            <router-view></router-view>
            <!-- <div class="user2" @click.stop="yesUser(true)" v-if="isUser">
              <div class="inUser1" v-if="isLoginImage">用户名</div>
              <div class="inUser1" v-else>喜欢简单</div>
              <div class="inUser2">
                <div class="toLogin" v-if="isLoginImage">未登录</div>
                <div class="toLogin" v-else><el-button @click.stop="outLogin" type="warning" round>退出登录</el-button>
                </div>
                <div class="toLogin1">
                  <div class="toLoginButton1"><el-icon>
                      <Key />
                    </el-icon></div>
                  <div class="toLoginButton1"><el-icon>
                      <CreditCard />
                    </el-icon></div>
                  <div class="toLoginButton1"><el-icon>
                      <Location />
                    </el-icon></div>
                </div>
                <div class="toLogin2">
                  <div class="intoLogin2">
                    <div class="intoLogin2text">与您的所有设备上同步并个性化设置</div>
                    <el-button class="intoLogin2Button" type="primary" round>开启同步功能...</el-button>
                  </div>
                </div>
                <div class="toLogin3">
                  <div class="toLoginButton3">
                    <div class="IntoLoginButton31">其他个人资料</div>
                    <div class="IntoLoginButton32"><el-icon>
                        <Tools />
                      </el-icon></div>
                  </div>
                  <div class="toLoginButton3">
                    <div class="IntoLoginButton33"><el-icon>
                        <Avatar />
                      </el-icon></div>
                    <div class="IntoLoginButton34">访客</div>
                  </div>
                  <div class="toLoginButton3">
                    <div class="IntoLoginButton33"><el-icon>
                        <Plus />
                      </el-icon></div>
                    <div class="IntoLoginButton34">添加</div>
                  </div>
                </div>
              </div>
              <div class="avatar" v-if="isLoginImage" @click.stop="toggleLogin"><el-avatar :size="66"
                  :icon="UserFilled" />
              </div>
              <div class="avatar" v-else><el-avatar :size="66" :icon="UserFilled" :src="circleUrl" /></div>
              <div class="edit"><el-icon>
                  <EditPen />
                </el-icon></div>
            </div> -->
            <div class="user2" v-if="isUser">
              <div class="inUser1">喜欢简单</div>
              <div class="inUser2">
                <div class="toLogin"><el-button @click.stop="outLogin" round>退出登录</el-button>
                </div>
                <div class="toLogin1">
                  <div class="toLoginButton1"><el-icon>
                      <Key />
                    </el-icon></div>
                  <div class="toLoginButton1"><el-icon>
                      <CreditCard />
                    </el-icon></div>
                  <div class="toLoginButton1"><el-icon>
                      <Location />
                    </el-icon></div>
                </div>
                <div class="toLogin2">
                  <div class="intoLogin2">
                    <div class="intoLogin2text">与您的所有设备上同步并个性化设置</div>
                    <el-button class="intoLogin2Button" type="primary" round>开启同步功能...</el-button>
                  </div>
                </div>
                <div class="toLogin3">
                  <div class="toLoginButton3">
                    <div class="IntoLoginButton31">其他个人资料</div>
                    <div class="IntoLoginButton32"><el-icon>
                        <Tools />
                      </el-icon></div>
                  </div>
                  <div class="toLoginButton3">
                    <div class="IntoLoginButton33"><el-icon>
                        <Avatar />
                      </el-icon></div>
                    <div class="IntoLoginButton34">访客</div>
                  </div>
                  <div class="toLoginButton3">
                    <div class="IntoLoginButton33"><el-icon>
                        <Plus />
                      </el-icon></div>
                    <div class="IntoLoginButton34">添加</div>
                  </div>
                </div>
              </div>
              <div class="avatar"><el-avatar :size="66" :icon="UserFilled" :src="circleUrl" /></div>
              <div class="edit"><el-icon>
                  <EditPen />
                </el-icon></div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, toRefs, computed, watchEffect } from 'vue';
import { Document, Menu as IconMenu, UserFilled, Setting, Right, } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
// import { Style } from 'ol/style';
// import { useUserStore } from "../stores/user"
// const userStore = useUserStore()
// onUnmounted(() => {
//   userStore.removeToken;
// });
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const state = reactive({
  circleUrl:
    '/Images/logomin.png',
})
const { circleUrl, } = toRefs(state)

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
function toggle() {
  isCollapse.value = !isCollapse.value;
}
const isUser = ref(false);

function toggleUser() {
  isUser.value = !isUser.value;
}
function noUser(status: boolean) {
  isUser.value = status;
}
function yesUser(status: boolean) {
  isUser.value = status;
}
const isLogin = ref(false);
const isLoginImage = ref(true);
function toggleLogin() {
  isLogin.value = true;
  isUser.value = false
}
function toggleLoginImage() {
  isLoginImage.value = false
  isLogin.value = false
}
function outLogin() {
  isLoginImage.value = true
  isUser.value = false
}
function loginLogoOut() {
  isLogin.value = false
}

//浮窗
const draggableDiv = ref<HTMLElement | null>(null);
const position = ref({ left: 300, top: 100 });
const canDrag = ref(false);
const isDragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const currentPosition = ref('relative');
const DrawerWidth = ref('0');
const DrawerHeight = ref('100%');
const leftDrawer = ref('auto');
const topDrawer = ref('auto');
const MainOrder = ref("0");
const flexDirection = ref('row');
const drawerTransition = ref('0.5s');
const minHeightDrawer = ref('0');
const minWidthDrawer = ref('0');
let isOverHeader = false;

const handleMouseDown = (event: MouseEvent) => {
  canDrag.value = true;
  const header = draggableDiv.value?.querySelector('.trueDrawer1');
  if (header && header.contains(event.target as Node)) {
    isOverHeader = true;
    if (canDrag && currentPosition.value === 'absolute') {
      startDrag(event);
    }
  } else {
    isOverHeader = false;
  }
};

const startDrag = (event: MouseEvent) => {
  if (!isDragging.value && canDrag.value && isOverHeader && currentPosition.value === 'absolute') {
    isDragging.value = true;
    startX.value = event.clientX - draggableDiv.value!.offsetLeft;
    startY.value = event.clientY - draggableDiv.value!.offsetTop;

    document.addEventListener('mousemove', doDrag);
    document.addEventListener('mouseup', stopDrag);
    event.preventDefault();
  }
};

const doDrag = (event: MouseEvent) => {
  if (isDragging.value && draggableDiv.value && currentPosition.value === 'absolute') {
    position.value.left = event.clientX - startX.value;
    position.value.top = event.clientY - startY.value;
  }
};

const stopDrag = () => {
  if (isDragging.value) {
    isDragging.value = false;
    document.removeEventListener('mousemove', doDrag);
    document.removeEventListener('mouseup', stopDrag);
  }
};

//抽屉
const isDrawer = ref(false);
const toggleDrawer = () => {
  drawerTransition.value = '0.5s'
  isDrawer.value = !isDrawer.value;
  isW.value = true
  isH.value = true
  if (!isBottomOverlay.value) {
    if (DrawerWidth.value === '0') {
      minWidthDrawer.value = '11.5vh'
      DrawerWidth.value = '36%'
    } else {
      minWidthDrawer.value = '0'
      DrawerWidth.value = '0'
    }
  } else {
    if (DrawerHeight.value === '0') {
      minHeightDrawer.value = '5vh'
      DrawerHeight.value = '30%'
    } else {
      minHeightDrawer.value = '0'
      DrawerHeight.value = '0'
    }
  }
}
//浮窗禁用
const isPanel = ref(true);
const isOverlay = ref(false);
const isLeftOverlay = ref(true);
const isBottomOverlay = ref(false);
const toggleDraggingAndPosition = () => {
  isW.value = isH.value = true
  drawerTransition.value = '0s'
  currentPosition.value = 'absolute';
  leftDrawer.value = '15%'
  topDrawer.value = '10%'
  DrawerHeight.value = '80%'
  DrawerWidth.value = '69%'
  isOverlay.value = true;
  isLeftOverlay.value = isBottomOverlay.value = false
  minHeightDrawer.value = '5vh'
};
const toggleLeftOverlay = () => {
  isW.value = isH.value = true
  drawerTransition.value = '0.5s'
  canDrag.value = false;
  currentPosition.value = 'relative';
  leftDrawer.value = '0'
  topDrawer.value = '0'
  flexDirection.value = 'row'
  MainOrder.value = "0"
  DrawerHeight.value = '100%'
  DrawerWidth.value = '36%'
  isLeftOverlay.value = true
  isOverlay.value = isBottomOverlay.value = false
  minWidthDrawer.value = '11.5vh'
}
const toggleBottomOverlay = () => {
  isW.value = isH.value = true
  drawerTransition.value = '0.5s'
  canDrag.value = false;
  currentPosition.value = 'relative';
  leftDrawer.value = '0'
  topDrawer.value = '0'
  flexDirection.value = 'column'
  MainOrder.value = "-1"
  DrawerWidth.value = '100%'
  DrawerHeight.value = '30%'
  isBottomOverlay.value = true
  isLeftOverlay.value = isOverlay.value = false
  minHeightDrawer.value = '5vh'
}
// 监听 div 宽度的变化

let resizeObserver: ResizeObserver | null = null;
onMounted(() => {
  if (draggableDiv.value) {
    // 创建一个 resizeObserver 来监听元素内容区域的变化
    resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const { width } = entry.contentRect;
        if (width <= 300) {
          isPanel.value = false;
        } else {
          isPanel.value = true;
        }
      }
    });

    // 监听 myDiv 元素的内容区域大小变化
    resizeObserver.observe(draggableDiv.value);

    // 如果 div 的宽度变化是由外部 CSS 动画或过渡引起的，
    // 并且你想要在动画完成后立即得到通知，你可能需要监听 transitionend 或 animationend 事件
    // 但这通常不适用于由 JavaScript 直接改变样式的情况
  }
});

onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
});
//浮窗拉伸
const isW = ref(true);
const isH = ref(true);
const boxWidth = ref(0);
const boxHeight = ref(0);
const startPullX = ref(0);
const startPullY = ref(0);
//Right拉伸
const onResizeRight = (event: MouseEvent) => {
  boxWidth.value += event.clientX - startPullX.value;
  startPullX.value = event.clientX;
};
const stopResizeRight = () => {
  document.removeEventListener('mousemove', onResizeRight);
  document.removeEventListener('mouseup', stopResizeRight);
};
const initResizeRight = (event: MouseEvent) => {
  drawerTransition.value = '0s'
  isW.value = false
  isH.value = false
  if (draggableDiv.value) {
    boxWidth.value = draggableDiv.value.clientWidth;
    boxHeight.value = draggableDiv.value.clientHeight;
  }
  startPullX.value = event.clientX;
  document.addEventListener('mousemove', onResizeRight);
  document.addEventListener('mouseup', stopResizeRight);
};
//Left拉伸
const onResizeLeft = (event: MouseEvent) => {
  boxWidth.value -= event.clientX - startPullX.value;
  startPullX.value = event.clientX;
};
const stopResizeLeft = () => {
  document.removeEventListener('mousemove', onResizeLeft);
  document.removeEventListener('mouseup', stopResizeLeft);
};
const doDragLeft = (event: MouseEvent) => {
  if (isDragging.value && draggableDiv.value && currentPosition.value === 'absolute') {
    position.value.left = event.clientX - startX.value;
  }
};

const stopDragLeft = () => {
  if (isDragging.value) {
    isDragging.value = false;
    document.removeEventListener('mousemove', doDragLeft);
    document.removeEventListener('mouseup', stopDragLeft);
  }
};
const initResizeLeft = (event: MouseEvent) => {
  drawerTransition.value = '0s'
  isW.value = false
  isH.value = false
  if (draggableDiv.value) {
    boxWidth.value = draggableDiv.value.clientWidth;
    boxHeight.value = draggableDiv.value.clientHeight;
  }
  startPullX.value = event.clientX;
  document.addEventListener('mousemove', onResizeLeft);
  document.addEventListener('mouseup', stopResizeLeft);
  isDragging.value = true;
  startX.value = event.clientX - draggableDiv.value!.offsetLeft;
  document.addEventListener('mousemove', doDragLeft);
  document.addEventListener('mouseup', stopDragLeft);
};
//Top拉伸
const onResizeTop = (event: MouseEvent) => {
  boxHeight.value -= event.clientY - startPullY.value;
  startPullY.value = event.clientY;
};
const stopResizeTop = () => {
  document.removeEventListener('mousemove', onResizeTop);
  document.removeEventListener('mouseup', stopResizeTop);
};
const doDragTop = (event: MouseEvent) => {
  if (isDragging.value && draggableDiv.value && currentPosition.value === 'absolute') {
    position.value.top = event.clientY - startY.value;
  }
};
const stopDragTop = () => {
  if (isDragging.value) {
    isDragging.value = false;
    document.removeEventListener('mousemove', doDragTop);
    document.removeEventListener('mouseup', stopDragTop);
  }
};
const initResizeTop = (event: MouseEvent) => {
  drawerTransition.value = '0s'
  isW.value = false
  isH.value = false
  if (draggableDiv.value) {
    boxWidth.value = draggableDiv.value.clientWidth;
    boxHeight.value = draggableDiv.value.clientHeight;
  }
  startPullY.value = event.clientY;
  document.addEventListener('mousemove', onResizeTop);
  document.addEventListener('mouseup', stopResizeTop);
  if (isOverlay) {
    isDragging.value = true;
    startY.value = event.clientY - draggableDiv.value!.offsetTop;
    document.addEventListener('mousemove', doDragTop);
    document.addEventListener('mouseup', stopDragTop);
  }

};

//Bottom拉伸
const onResizeBottom = (event: MouseEvent) => {
  boxHeight.value += event.clientY - startPullY.value;
  startPullY.value = event.clientY;
};
const stopResizeBottom = () => {
  document.removeEventListener('mousemove', onResizeBottom);
  document.removeEventListener('mouseup', stopResizeBottom);
};
const initResizeBottom = (event: MouseEvent) => {
  drawerTransition.value = '0s'
  isW.value = false
  isH.value = false
  if (draggableDiv.value) {
    boxWidth.value = draggableDiv.value.clientWidth;
    boxHeight.value = draggableDiv.value.clientHeight;
  }
  startPullY.value = event.clientY;
  document.addEventListener('mousemove', onResizeBottom);
  document.addEventListener('mouseup', stopResizeBottom);
};


//导航栏
const screenWidth = ref(window.innerWidth);
// 计算属性，根据屏幕尺寸判断是否需要 ellipsis
const isEllipsis = computed(() => screenWidth.value <= 1228);
// 监听窗口大小变化
function handleResize() {
  screenWidth.value = window.innerWidth;
}
onMounted(() => {
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

</script>
<style scoped>
.common-layout {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  /* 防止内容溢出 */
}

.login {
  position: absolute;
  right: 40%;
  top: 20%;
  display: flex;
  flex-direction: column;
  gap: 8%;
  align-items: center;
  width: 20%;
  height: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 3;
  border-radius: 0.5vw;
  overflow: hidden;
  /* 防止内容溢出 */
}

.loginLogo {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.loginLogoOut {
  position: absolute;
  top: 3%;
  right: 1%;
  width: 10%;
  height: 25%;
  font-size: 1.5vw;
}

.inLoginLogo {
  width: 30%;
  height: 80%;
  background: url(/Images/logomin.png);
  background-size: cover;
  /* 覆盖整个div */
  background-position: center;
  /* 图片居中显示 */
}

.Account {
  width: 80%;
  height: 10%;
  opacity: 0.7;
}

.Password {
  width: 80%;
  height: 10%;
  opacity: 0.7;
}

.inLogin {
  width: 80%;
  height: 10%;
  font-size: 1.5vw;
  text-align: center;
  background-color: #f34e01;
  opacity: 0.7;
}

.Body {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* 防止内容溢出 */
}

.Header {
  display: flex;
  width: 100%;
  height: 6%;
}

.el-menu-demo {
  width: 94%;
  height: 100%;
}

.flex-grow {
  flex-grow: 1;
}

.logo {
  width: 12%;
  height: 100%;
  margin-right: 33%;
  background: url(/Images/logo.png);
  background-size: cover;
  /* 覆盖整个div */
  background-position: center;
  /* 图片居中显示 */
}



.topbar1 {
  color: #000;
  width: 7%;
  height: 100%;
  text-decoration: none;
  text-align: center;
  padding-top: 0.8%;
  font-size: 0.8vw;
  transition: background-color 0.3s ease;
  border-radius: 10%;
}

.topbar1:hover {
  /* 鼠标悬停时的背景色 */
  background-color: rgb(230, 238, 245);
}

.user1 {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  color: #000;
  margin-left: 1%;
  width: 5%;
  height: 100%;
  /* background-color: #0dedf1; */
  /* text-decoration: none;*/
  /* text-align: center; */
  /* padding-top: 0.5%;   */
  transition: background-color 0.3s ease;
  border-radius: 10%;
  cursor: pointer;
}

.user1:hover {
  /* 鼠标悬停时的背景色 */
  background-color: rgb(230, 238, 245);
}

.Aside {
  width: auto;
  display: flex;
  position: relative;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 50%;
}

.menu1 {
  padding: 0 !important;
  display: flex;
  justify-content: center;
}

.menuD23 {
  padding-left: 20%;
  color: #000;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.Main {
  width: auto;
  height: 94vh;
  display: flex;
  position: relative;
  padding: 0;
  overflow: hidden;
  /* 防止内容溢出 */
}

.trueDrawer {
  z-index: 6;
  display: flex;
  flex-direction: column;
  /* 竖直排列 */
  background-color: rgb(230, 238, 245);
  border-radius: 0.5vw;
  overflow: hidden;
  /* 防止内容溢出 */
}

.TrueDrawer {
  flex-grow: 1;
  display: flex;
}

.pullDrawerTop {
  width: 100%;
  height: 6px;
  cursor: ns-resize;
}

.trueDrawer1 {
  width: 100%;
  height: 5vh;
  display: flex;
  border: 1px solid rgb(190, 190, 190);
}

.trueDrawer11 {
  flex-grow: 1;
  display: flex;
  /* justify-content: center;   */
  align-items: center;
  margin-left: 1vw;
}

.trueDrawerImage11 {
  width: 2vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trueDrawerOverlay {
  width: 2vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.Overlay {
  pointer-events: none;
  opacity: 0.5;
  /* 可选，改变透明度以视觉表示不可点击 */
  cursor: not-allowed;
  /* 更改鼠标样式为禁止符号 */
}

.trueDrawer12 {
  width: 2vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.trueDrawer13 {
  width: 2vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.trueDrawer14 {
  width: 2vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5vw;
  cursor: pointer;
}

.pullDrawerLeft {
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

.trueDrawer2 {
  cursor: default;
  flex-grow: 1;
}

.pullDrawerRight {
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

.pullDrawerBottom {
  width: 100%;
  height: 6px;
  cursor: ns-resize;
}

.view {
  /* position: relative;
  top: 0; */
  flex-grow: 1;
  overflow: hidden;
  /* cursor: default; /* 防止在父元素上拖动时产生意外的拖动效果 */
}

.Drawer {
  position: absolute;
  right: 1vw;
  top: 1vh;
  width: auto;
  height: 2.5vh;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  cursor: pointer;
}

.user2 {
  position: relative;
  position: absolute;
  right: 5%;
  top: 0;
  display: flex;
  flex-direction: column;
  /* 竖直排列 */
  align-items: center;
  /* 交叉轴（水平方向）上的对齐方式，这里使子项在水平方向上居中 */
  /* justify-content: center; /* 主轴（竖直方向）上的对齐方式，使子项在竖直方向上居中 */
  /* gap: 2%; 子项之间的间距，如果不需要可以省略  */
  width: 20%;
  height: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  /* 白色背景，50%透明度 */
  z-index: 3;
  border-radius: 0.5vw;
  overflow: hidden;
  /* 防止内容溢出 */
}

.inUser1 {
  width: 100%;
  height: 20%;
  background-color: #d8e3fb;
  text-align: center;
  font-size: 1vw;
  padding-top: 6%;
}

.inUser2 {
  width: 100%;
  height: 80%;
  background-color: white;
}

.toLogin {
  width: 100%;
  height: 20%;
  text-align: center;
  font-size: 1vw;
  padding-top: 10%;
}

.toLogin1 {
  width: 100%;
  height: 15%;
  text-align: center;
  font-size: 1vw;
  display: flex;
  justify-content: center;
  gap: 3%;
}

.toLoginButton1 {
  width: 10%;
  height: 66.6%;
  background-color: #d8e3fb;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toLoginButton1:hover {
  background-color: rgb(230, 238, 245);
}

.toLogin2 {
  width: 100%;
  height: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intoLogin2 {
  width: 90%;
  height: 90%;
  border-radius: 5%;
  background-color: rgb(230, 238, 245);
  display: flex;
  flex-direction: column;
  /* 竖直排列 */
  align-items: center;
  /* 交叉轴（水平方向）上的对齐方式，这里使子项在水平方向上居中 */
  /* /* justify-content: center; /* */
}

.intoLogin2text {
  width: 100%;
  height: 50%;
  text-align: center;
  font-size: 1vw;
  padding-top: 5%;
}

.intoLogin2Button {
  width: 80%;
  height: 30%;
  font-size: 1vw;
  color: white;
}

.toLogin3 {
  width: 100%;
  height: 30%;
  font-size: 1vw;
  border: 1px solid rgb(190, 190, 190);
}

.toLoginButton3 {
  width: 100%;
  height: 33.33%;
  display: flex;

}

.toLoginButton3:hover {
  background-color: rgb(230, 238, 245);
}

.IntoLoginButton31 {
  width: 90%;
  height: 100%;
  padding-left: 5%;
}

.IntoLoginButton32 {
  width: 10%;
  height: 100%;
}

.IntoLoginButton33 {
  width: 20%;
  height: 100%;
  text-align: center;
  padding: 1%;
}

.IntoLoginButton34 {
  width: 80%;
  height: 100%;
}

.avatar {
  position: absolute;
  left: 40%;
  top: 12%;
  width: 20%;
  height: 16%;
  background-color: white;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar:hover {
  background-color: rgb(230, 238, 245);
}

.edit {
  position: absolute;
  right: 8%;
  top: 10%;
  width: 7.5%;
  height: 6%;
  background-color: #c0c4cc;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit:hover {
  background-color: rgb(230, 238, 245);
}

.router-link-active {
  /* background-color: #0dedf1; */
  background-color: rgb(230, 238, 245);
  border-color: #1b2a2b;
  /* box-shadow: 1px 1px 3px 1px #0efcff inset; */
  box-shadow: 1px 1px 3px 1px rgb(210, 218, 225) inset;
}
</style>
